<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="images/拉黑小怪兽.png">
    <title>仓库</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js"></script>
</head>
<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
<link href="css/button.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
<link href="css/daohang.css" rel='stylesheet' type='text/css' />
<style>
    .loginButton {

        margin-top: 5px;
        /* 按钮顶部与输入框的距离 */
        width: 300px;
        height: 40px;
        color: white;
        /* 按钮字体颜色 */
        border: 0;
        /* 删除按钮边框 */
        border-radius: 20px;
        /* 按钮圆角边 */
        background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        /* 按钮颜色 */
        cursor: pointer;
    }

    .container {
        background-color: #fff;
        /* 白色背景 */
        display: flex;
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
        height: 100vh;
    }

    .elegant-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        /* 让列表项水平排列 */
        background-color: white;
        /* 背景色 */
        border: 1px solid #ccc;
        /* 边框 */
        border-radius: 10px;
        /* 圆角边框 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        /* 阴影效果 */
    }

    .elegant-menu li {
        padding: 20px;
        text-align: center;
        border-right: 1px solid #ccc;
        /* 垂直分隔线 */
    }

    .elegant-menu li:last-child {
        border-right: none;
    }

    .elegant-menu li a {
        text-decoration: none;
        color: #333;
        /* 文本颜色 */
        font-weight: bold;
        font-size: 16px;
        transition: color 0.3s;
    }

    .elegant-menu li a:hover {
        color: #00bcd4;
        /* 鼠标悬停时的文本颜色 */
    }

    .px_tabs {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        background-color: #fff;
        list-style-type: none;
        overflow-x: auto;
    }

    .sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 9999999;
        min-width: 1000px;
    }

    .cd-search {
        width: 60%;
        top: 100%;
        left: 38%;
        border-radius: 25px;
    }

    .cd-search input {
        border-radius: 25px;
    }

    .image-preview {
        display: flex;
        flex-wrap: wrap;
    }

    .image-preview img {
        max-width: 200px;
        margin: 10px;
    }

    /* 样式化自定义的文件上传按钮 */
    .custom-file-upload {
        border: 1px solid white;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
        text-align: center;
        background-color: white;
        color: #333;
        border-radius: 4px;
    }

    /* 隐藏默认的文件上传输入框 */
    #imageInput {
        display: none;
    }

    /* 美化显示上传的图片 */
    #imageContainer {
        display: flex;
        flex-wrap: wrap;
    }

    .uploadedImage {
        max-width: 200px;
        max-height: 200px;
        margin: 10px;
    }


    /* 样式化框 */
    .custom-container {
        display: flex;

        align-items: center;
        justify-content: center;
        text-align: center;
    }

    ._bgsetting {
        opacity: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, .2);
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transition: opacity .2s;
        -moz-transition: opacity .2s;
        transition: opacity .2s;
    }

    ._bgsetting .button {
        width: 140px;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        background-color: rgba(0, 0, 0, .4);
        color: #fff;
        position: absolute;
        top: 16px;
        right: 13px;
    }

    .tertiary {
        background-color: #f7f8fa;
        border-color: rgba(185, 193, 199, .5);
        text-shadow: none;
        color: #71767a;
    }

    .custom-box {
        width: 100px;
        height: 100px;
        border: 2px solid grey;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        margin-bottom: 10px;
    }

    /* 当鼠标悬停时改变样式 */
    .custom-box:hover {
        background-color: #f0f0f0;
    }

    .add {
        position: relative;
        top: -5px;
        left: 20px;
    }

    /* 样式化文本 */
    .text-inside-box {
        position: relative;
        top: 18px;
        right: 10px;
    }
</style>
</head>

<body>

    <div class="top-bar_sub_w3layouts_agile sticky" style="height: 80px;height: 80px; border-bottom: 2px solid grey;">
        <ul class="_ul_ daohangpos">
            <li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
                <a class="daohang_font" id="daohang-faxian" href="shouye.html">首页 </a>
                <a href="remen.html" class="daohang_font">热门</a>
                <a href="xinzuo.html" class="daohang_font">新作</a>
                <a href="guanzhu.html" class="daohang_font">关注</a>
                <a href="cangku.html" class="daohang_font">仓库</a>
            </li>
        </ul>
        <div class="search">
            <div class="right" style="right: 90px;">
                <h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="shouye.html">Photo
                        Go</a></h1>
                <h5>
                    <a style="width: 150px; position: absolute;right:380px;top:25px;padding: 2px 20px;text-align: center;"
                    class="sign signup " href="userinfo.html">修改个人信息</a>
                <a style="position: absolute;right:250px;top:25px;padding: 2px 20px;text-align: center;"
                    class="sign signup " href="shangchuan.html">上传</a>
                <a id="tuichu"
                    style="width: 150px; position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
                    class="sign signup ">退出登录</a>
                </h5>
            </div>
            <div class="cd-main-header">
                <ul class="cd-header-buttons">
                    <li><a class="cd-search-trigger" href="#cd-search"
                            style="position: absolute;right: 10px;top: 35px;"> <span></span></a></li>
                </ul>
            </div>
            <div id="cd-search" class="cd-search">

                <input id="sousuo" name="Search" type="search" placeholder="搜索作品"
                    onkeydown="handleKeyDown(event)">

            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
    </div>
    <div class="container" style="position: relative;min-width: 1000px;height: 500px;">
        <img id="beijing" src="./images/1.jpeg"
            style="height: 300px;width: 1200px;position: relative;bottom: 100px;left: 140px;">
        <label for="fileInput" class="custom-file-upload"
            style=" width: 150px;height: 100px; position: relative;left: 150px;bottom: 80px;">

            <a id="setting" style="width: 150px; position: absolute;left: 80px ; padding: 2px 20px;text-align: center;"
                class="sign signup ">设置个人主页</a>


        </label>
        <input type="file" id="imageInput" accept="image/png,image/jpg" multiple style="display: none;">
        <button onclick="selectImages()" id="fileInput" style="display: none;">
        </button>
        <img id="touxiang" src="./images/拉黑小怪兽.png"
            style="width: 100px;height: 100px;position: absolute;top:240px;left:500px;">
        <p id="guanzhu" style="font-size: 15px; position: absolute;top:350px;left:450px">关注</p>
        <p id="fensi" style="font-size: 15px;position: absolute;top:350px;left:550px">粉丝</p>
        <ul class="elegant-menu" style="position: absolute;top:380px;left:445px">
            <li><a href="cangku.html" >公开作品</a></li>
            <li><a href="private.html" style="color: #00bcd4;">私有作品</a></li>
        </ul>
        <a id="upload" style="position: relative;top:10px;left:100px"><input class="loginButton" type="button"
                value="上传个人主页" style="width: 200px;" /></a>
    </div>
    <div id="zhanshi" class="justified-gallery"
        style="position: relative;min-width: 1000px;height: 1000px;max-width: 1500px;">

    </div>
    <script>
        function handleKeyDown(event) {
            if (event.keyCode === 13) {
                var sousuo = document.getElementById('sousuo');
                var d1 = {
                    "description": "",
                }
                d1["description"] = sousuo.value;
                console.log("type", typeof (sousuo.value), "text:", sousuo.value);
                $.ajax({
                    method: 'get',
                    url: 'http://localhost:7777/content/Category/list',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(d1),
                    success: function (data, status, xhr) {
                        var responseText = xhr.responseText;
                        console.log(responseText);
                        if (responseText.includes("200")) {
                            var result = JSON.parse(responseText);
                            var data = result["data"];
                            console.log("data:", data);
                            var len = data.length;
                            var where = "sousuo.html" + "?";
                            for (var i = 0; i < len; i++)
                                where = where + data[i]["id"];
                            window.location.href = where;
                        }
                    },
                    error: function (xhr, status, error) {
                        var responseText = xhr.responseText;
                        console.log("error:", responseText);
                    }
                })
                event.preventDefault(); // 阻止默认的回车提交行为（如果有）
            }
        }
    </script>
    <script>
        function selectImages() {
            const input = document.getElementById('imageInput');
            input.click(); // 模拟点击文件输入框
        }
        document.getElementById('imageInput').addEventListener('change', handleImageUpload);
        function handleImageUpload(event) {
            const files = event.target.files;
            const imagePreview = document.getElementById('beijing');
            if (files && imagePreview) {
                for (const file of files) {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        imagePreview.src = e.target.result;
                    };
                }
            }
        }
    </script>
    <script>
        var which = 0;
        var guanzhu = document.getElementById("guanzhu");
        var fensi = document.getElementById("fensi");
        const token = localStorage.getItem("token");
        const userid = localStorage.getItem("userid");
        var upload = document.getElementById("upload");
        upload.addEventListener("mousedown", function (event) {
            var count = 0;
            var xxx = "";
            for (var i = 0; i < 1; i++) {
                const input = document.getElementById('imageInput');
                const file = input.files[i];
                var xmlhttp = new XMLHttpRequest()
                var formData = new FormData();
                formData.append('img', file);
                console.log(formData);
                xmlhttp.open('post', 'http://localhost:7777/upload');
                xmlhttp.setRequestHeader('token', token);
                xmlhttp.onreadystatechange = function (res) {
                    if (xmlhttp.status === 200 && xmlhttp.readyState == 4) {
                        console.log(xmlhttp.response)
                        var responseText = xmlhttp.response;
                        var result = JSON.parse(responseText);
                        xxx = result["data"];
                        count++;
                        fff();
                    }
                }
                xmlhttp.send(formData);
            }

            function fff() {
                if (count == 1) {
                    var d = {
                        "background": "",
                    }
                    d["background"] = xxx;
                    $.ajax({
                        method: 'put',
                        url: 'http://localhost:7777/user/userInfo',
                        contentType: 'application/json;charset=UTF-8',
                        headers: {
                            "token": token,
                        },
                        data: JSON.stringify(d),
                        success: function (data, status, xhr) {
                            var responseText = xhr.responseText;
                            console.log(responseText);
                        },
                        error: function (xhr, status, error) {
                            var responseText = xhr.responseText;
                            console.log(responseText);
                        }
                    })
                }
            }
        })
        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/user/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var result = JSON.parse(responseText);
                    var data = result["data"];
                    var src = data["avatar"];
                    var touxiang = document.getElementById("touxiang");
                    touxiang.src = src;
                    var beijing = document.getElementById("beijing");
                    beijing.src = data["background"];
                    console.log(data);
                }
            },
            error: function (xhr, status, error) {
                var responseText = xhr.responseText;
                console.log("error:", responseText);
            }
        })
        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/fans/liked/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var now = 0;
                    for (var i = 0; i < responseText.length; i++) {
                        if (responseText[i] == "{")
                            now++;
                    }
                    now--;
                    fensi.innerHTML = "粉丝" + now;
                }
            },
            error: function (xhr, status, error) {
                var responseText = xhr.responseText;
                console.log("error:", responseText);
            }
        })
        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/fans/like/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var now = 0;
                    for (var i = 0; i < responseText.length; i++) {
                        if (responseText[i] == "{")
                            now++;
                    }
                    now--;
                    guanzhu.innerHTML = "关注" + now;
                }
            },
            error: function (xhr, status, error) {
                var responseText = xhr.responseText;
                console.log("error:", responseText);
            }
        })

        $.ajax({
            method: 'get',
            url: 'http://localhost:7777/article/user/' + userid,
            contentType: 'application/json;charset=UTF-8',
            success: function (data, status, xhr) {
                var responseText = xhr.responseText;
                console.log(responseText);
                if (responseText.includes("200")) {
                    var result = JSON.parse(responseText);
                    var data = result["data"];
                    console.log("data:", data);
                    var len = data.length;
                    console.log("data.length", len);
                    $(document).ready(function () {
                        // 假设后端提供的图片URL列表是一个JSON数组
                        var imageUrls = [];
                        for (var i = 0; i < len; i++) {
                            if (data[i]["status"] == "0")
                                imageUrls[i] = data[i]["photo"];
                        }
                        // 将图片URL动态添加到Justified-Gallery中
                        var gallery = $("#zhanshi");
                        $.each(imageUrls, function (index, imageUrl) {
                            gallery.append('<a href="' + imageUrl + '" data-lightbox="my-gallery"><img src="' + imageUrl + '" alt="Image ' + (index + 1) + '"></a>');
                        });

                        // 初始化Justified-Gallery
                        gallery.justifiedGallery({
                            rowHeight: 250,
                            margins: 5,
                            maxRowHeight: 200,
                            maxRowHeightPremium: 200,
                            lastRow: 'justify',
                            captions: false,
                            randomize: false
                        });
                    });
                }
            },
            error: function (xhr, status, error) {
                var responseText = xhr.responseText;
                console.log("error:", responseText);
            }
        }) 
    </script>
    <script src="js/main.js"></script>
    <script src="js/jquery.chocolat.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.gallery-grid1 a').Chocolat();
        });
    </script>
    <link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 900);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->

    <script type="text/javascript">
        $(document).ready(function () {
            /*
                                    var defaults = {
                                            containerID: 'toTop', // fading element id
                                        containerHoverID: 'toTopHover', // fading element hover id
                                        scrollSpeed: 1200,
                                        easingType: 'linear' 
                                        };
                                    */

            $().UItoTop({
                easingType: 'easeOutQuart'
            });

        });
    </script>
    <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
    <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>


</body>

</html>